body > section#wrapper > main div.tab[data-name='dashboard'] {

  > div.boxWrapper {
    max-width: 1280px;

    > div.box {
      max-width: none;

      &.wide {
        width: calc(75% - 10px);
      }

      &.small {
        width: calc(25% - 10px);
      }
    }

    > div.tipsTricks {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
      grid-gap: 20px;
      min-height: 350px;
      padding: 0;
      overflow: hidden;

      @media (max-width: 1600px) {
        width: 100% !important;
      }

      @media (max-width: 1200px) {
        display: block;
      }

      > svg.loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      > * {
        transition: opacity 0.3s, transform 0.3s;
      }

      &.loading > *:not(svg.loading) {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
        pointer-events: none;
      }

      > div.info {
        padding: 20px 20px;

        > h2 {
          font-size: 180%;
          margin-bottom: 25px;

          > span {
            color: $textColorLight;
            font-size: 90%;
          }
        }

        > p {
          font-size: 130%;
          line-height: 180%;

          > i, > span {
            position: relative;
            display: inline-block;
            line-height: 140%;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.05);
            font-style: normal;
            padding: 0 5px;
            border-radius: 4px;
            margin: 0 3px;
          }

          > span {
            @include mask(null, $textColor, 22px);
            width: 35px;
            height: 30px;
            vertical-align: top;
          }
        }

        > a {
          display: inline-block;
          margin-top: 18px;
          cursor: pointer;
          font-size: 110%;
          color: $mainColor2;
          font-weight: $__fontWeightMedium;
        }
      }

      > img {
        display: block;
        width: 360px;

        @media (max-width: 1200px) {
          margin: 20px auto;
        }
      }


      > button {
        @extend %highlightButton;
        display: block;
        width: fit-content;
        padding-left: 25px;
        padding-right: 34px;
        margin: 0 auto 20px;
        grid-column: 2;

        @media (max-width: 1200px) {
          margin: 20px auto;
        }

        &::before {
          content: "";
          position: absolute;
          right: 14px;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-left-color: $textColorInverted;
        }
      }

      &[data-type='quick_bookmarking'] > div.info > p > span::before {
        @include maskImage("icon-lock");
      }

      &[data-type='hide_entries'] > div.info > p > span::before {
        @include maskImage("icon-hide");
      }

      &[data-type='separators'] > div.info > p > span::before {
        @include maskImage("icon-add");
      }

      &[data-type='keyboard_shortcuts'] > div.info > p > span::before {
        @include maskImage("icon-keyboard");
      }

      &[data-type='newtab'] {

        > img {
          width: 500px;
        }

        > div.info > p > span::before {
          @include maskImage("icon-edit");
        }
      }

      &[data-type='version'] > img {
        width: 250px;
        margin: 10px 30px 0;
      }

      &[data-type='about'] > img {
        margin: 10px 20px 0;
      }

      &[data-type='i18n'] > img {
        margin: 20px 20px 0;
      }

      &[data-type='share_data'] > img {
        margin: 20px 20px 0;
      }

      &[data-type='privacy'] > img {
        width: 250px;
        margin: 20px 20px 0;
      }

      &[data-type='synchronization'] > img {
        width: 220px;
        margin: 30px 50px 0;
      }
    }

    > div.links {

      @media (max-width: 1600px) {
        width: 100% !important;
      }

      > ul {

        > li {

          + li {
            margin-top: 7px;
          }

          @media (max-width: 1600px) {
            display: inline-block;

            + li {
              margin-top: 0;
              margin-left: 10px;
            }
          }

          > a {
            @include mask(null, $textColor, 28px);
            position: relative;
            display: block;
            width: 100%;
            padding: 10px 10px 10px 50px;
            font-size: 120%;
            transition: background-color 0.3s;

            &:hover {
              background-color: rgba(0, 0, 0, 0.05);
            }

            &::before {
              width: 28px;
              left: 10px;
            }

            &[data-name="support"]::before {
              @include maskImage("settings/icon-support");
            }

            &[data-name="privacy"]::before {
              @include maskImage("settings/icon-privacy");
            }

            &[data-name="permissions"]::before {
              @include maskImage("icon-unlock");
            }
          }
        }
      }
    }

    > div.info {
      background: rgba($mainColor2, 0.5);
      transition: transform 0.2s, background-color 0.3s;
      padding: 0;

      &:hover {
        transform: scale(1.02);
        background: rgba($mainColor2, 0.7);
      }

      > a {
        display: block;
        padding: 20px 24px 26px;

        > h2 {
          font-size: 160%;
          color: $textColorInverted;
          margin: 0;
        }

        > img {
          width: 100%;
          padding: 10px;
        }

        > p {
          color: $textColorInverted;
          font-size: 110%;
          line-height: 150%;
        }
      }
    }
  }

  > footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    max-width: 1280px;
    padding: 10px 10px 0;
    font-size: 90%;

    > div {

      > a.version {

        > span {
          color: $mainColor2;
          font-weight: $__fontWeightMedium;
        }
      }

      > span.lastUpdate {
        display: inline-block;
        font-size: 90%;
        margin-left: 5px;
        color: $textColorLight;
      }

      &.copyright {

        > span {
          font-weight: $__fontWeightMedium;
        }
      }
    }
  }
}

@import "../../rtl/include/settings/dashboard";